<template>
  <el-table :data="buttonsClone" size="mini" border>
    <el-table-column prop="name" label="按钮名" min-width="80px" show-overflow-tooltip/>
    <el-table-column prop="code" label="属性" min-width="80px" show-overflow-tooltip/>
    <el-table-column prop="display" label="是否显示" width="80px">
      <template slot-scope="{row}">
        <el-checkbox v-model="row.display" @change="handleDisplayChange(row)"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column label="#" min-width="35px">
      <template slot-scope="{row}">
        <el-button v-if="row.isDelete" type="text" icon="el-icon-delete" style="color: red;" title="移除" @click="handleFieldDelete(row)"></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

export default {
  name: "FlowButton",
  props: {
    businessObject: Object,
    type: String,
    id: String,
    buttons: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  inject: {
    prefix: "prefix",
  },
  data() {
    return {
      extensionElements: null,
      buttonsClone: []
    };
  },
  watch: {
    businessObject: {
      immediate: true,
      handler: function (val) {
        if (val) {
          this.$nextTick(() => this.resetBaseInfo());
        }
      }
    }
  },
  methods: {
    resetBaseInfo() {
      this.bpmnElement = window?.bpmnInstances?.bpmnElement;
      this.buttonsClone = JSON.parse(JSON.stringify(this.buttons));
      // 节点表单数据
      this.extensionElements = this.bpmnElement.businessObject.extensionElements || window.bpmnInstances.moddle.create('bpmn:ExtensionElements', {values: []});

      // 处理系统按钮
      this.buttonsClone.forEach(button => {
        let findElementButton =  this.extensionElements.values.find(element => element.$type === `${this.prefix}:Button` && button.code === element.prop);
        if (findElementButton) {
          button.display = findElementButton.display;
        } else {
          button.display = false;
        }
      });
      // 处理流程按钮
      this.extensionElements.values.forEach(element => {
        if (element.$type === `${this.prefix}:Button`) {
          let findButton = this.buttonsClone.find(button => button.code === element.prop);
          if (!findButton) {
            // 添加流程的按钮
            this.buttonsClone.push({name: element.label, code: element.prop, display: element.display, isDelete: true});
          }
        }
      });
    },
    // 新增或修改流程按钮
    handleDisplayChange(row) {
      // 新增或修改
      let button = this.extensionElements.values.find(e => e.prop === row.code);
      if (button) {
        button.label = row.name;
        button.display = row.display;
      } else {
        button = window.bpmnInstances.moddle.create(`${this.prefix}:Button`, {
          label: row.name,
          prop: row.code,
          display: row.display
        });
        this.extensionElements.values.push(button);
      }
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {extensionElements: this.extensionElements});
    },
    handleFieldDelete(row) {
      let button = this.extensionElements.values.find(e => e.$type === `${this.prefix}:Button` && e.prop === row.code);
      this.extensionElements.values.splice(this.extensionElements.values.indexOf(button), 1);
      window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {extensionElements: this.extensionElements});
    }
  },
  beforeDestroy() {
    this.bpmnElement = null;
    this.extensionElements = null;
  }
};
</script>
